SciChart WPF 2D Charts > 2D Chart Types > The Stripe Series Type
The Stripe Series Type

Stripe series is provided by the FastStripeRenderableSeries type. This renderable series accepts data from a StripeDataSeries (X[], X1[], Y, Y1) and displays it as series of rectangular stripes with an optional text label per stripe.

Declare a FastStripeRenderableSeries in XAML / Code Behind

Declare a FastStripeRenderableSeries in XAML
Copy Code
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface>
    <s:SciChartSurface.RenderableSeries>
        <s:FastStripeRenderableSeries x:Name="rSeries" StrokeThickness="1"
                                      Stroke="White" Fill="DodgerBlue"/>
    </s:SciChartSurface.RenderableSeries>
</s:SciChartSurface>
Declare a FastStripeRenderableSeries in Code Behind
Copy Code
// Code Behind, e.g. in OnLoaded event handler, set the DataSeries
// FastStripeRenderableSeries expects data in the format X[],X1[],Y1,Y2
var count = 100;
var xArray = new double[count];
var x1Array = new double[count];
for (int i = 0; i < count; i++)
{
    var stripeStart = i * 10;
    var stripeEnd = stripeStart + 5;
    xArray[i] = stripeStart;
    x1Array[i] = stripeEnd;
}
rSeries.DataSeries = new StripeDataSeries<double,double>(xArray, x1Array, 2.0, 4.0);

Declare a FastStripeRenderableSeries in Pure Code

Declare a FastStripeRenderableSeries in Pure Code
Copy Code
// Declare a SciChartSurface
var sciChartSurface = new SciChartSurface();
// ...
// Declare and add a FastStripeRenderableSeries
var stripeSeries = new FastStripeRenderableSeries
{
    StrokeThickness = 1,
    Stroke = Colors.White,
    Fill = Brushes.DodgerBlue
};
// Code Behind, e.g. in OnLoaded event handler, set the DataSeries
// FastStripeRenderableSeries expects data in the format X-X,X1-X1,Y1,Y2
var count = 100;
var xArray = new double[count];
var x1Array = new double[count];
for (int i = 0; i < count; i++)
{
    var stripeStart = i * 10;
    var stripeEnd = stripeStart + 5;
    xArray[i] = stripeStart;
    x1Array[i] = stripeEnd;
}
stripeSeries.DataSeries = new StripeDataSeries<double,double>(xArray, x1Array, 2.0, 4.0);

Updating data in the Stripe Series

The StripeDataSeries does not support Append, Insert, Update, and Remove methods like the other data series. However, it is possible to update data arrays and force a redraw. To do this, use the following code:

Updating data in the Stripe Series
Copy Code
var count = 100;
var xArray = new double[count];
var x1Array = new double[count];
for (int i = 0; i < count; i++)
{
    var stripeStart = i * 10;
    var stripeEnd = stripeStart + 5;
    xArray[i] = stripeStart;
    x1Array[i] = stripeEnd;
}
var stripeDataSeries = new StripeDataSeries<double,double>(xArray, x1Array, 2.0, 4.0);
// ...
// Update some data and force a refresh of parent chart
x1Array [0] = 10.0;
stripeDataSeries.InvalidatateParentSurface(RangeMode.None);

Text labels in the Stripe Series

The Stripe Series supports displaying text labels inside rectangular stripes. To achieve this, you have to implement the IPointLabelProvider interface and set the FastStripeRenderableSeries.PointLabelProvider property.

The IPointLabelProvider interface is defined as follows:

The IPointLabelProvider interface
Copy Code
/// <summary>
/// Defines the interface to get text labels for supported renderable series
/// </summary>
public interface IPointLabelProvider
{
    /// <summary>
    /// Called at the start of a renderable series rendering before the current draw operation.
    /// </summary>
    /// <param name="rSeries">The source <see cref="IRenderableSeries"/></param>
    void OnBeginSeriesDraw(IRenderableSeries rSeries);
    /// <summary>
    /// Returns a text label for the data-point by index.
    /// </summary>
    /// <param name="rSeries">The source <see cref="IRenderableSeries"/></param>
    /// <param name="index">The index of the data-point.</param>
    /// <param name="metadata">The PointMetadata associated with this data-point.</param>
    string GetLabelText(IRenderableSeries rSeries, int index, IPointMetadata metadata);
}

This interface contains the GetLabelText method, which returns a string for each rectangular stripe using the index of a data-point in the StripeDataSeries. You need to implement this method with whatever behavior you want to create and/or retrieve text labels.

Minimum width for text labels

The StripeRenderableSeries provides the LabelMinWidth property, which specifies the minimum width of the rectangular stripe whereby a text label will be shown. If this property is set, the text labels will not be shown for stripes with width less than StripeRenderableSeries.LabelMinWidth.

Setting the LabelMinWidth (XAML)
Copy Code
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface>
    <s:SciChartSurface.RenderableSeries>
        <s:FastStripeRenderableSeries LabelMinWidth="70"/>
    </s:SciChartSurface.RenderableSeries>
</s:SciChartSurface>
Setting the LabelMinWidth (Code)
Copy Code
// Setting the LabelMinWidth for Stripe series
var stripeRenderableSeries = new FastStripeRenderableSeries();
stripeRenderableSeries.LabelMinWidth = 70;

Worked Example: Attaching a PointLabelProvider to a FastStripeRenderableSeries

An example of applying an IPointLabelProvider to FastStripeRenderableSeries can be found below.

Creating the StripePointLabelProvider
Copy Code
public class StripePointLabelProvider : IPointLabelProvider
{
    private StripeDataSeries<double,double> _sourceData;
    public void OnBeginSeriesDraw(IRenderableSeries rSeries)
    {
        _sourceData = (StripeDataSeries<double,double>) rSeries.DataSeries;
    }
    public string GetLabelText(IRenderableSeries rSeries, int index, IPointMetadata metadata)
    {
        return $"X = {_sourceData.XValues[index]:N2}";
    }
}
Attaching the StripePointLabelProvider to FastStripeRenderableSeries (XAML)
Copy Code
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface>
    <s:SciChartSurface.Resources>
       <local:StripePointLabelProvider x:Key="MyPointLabelProvider"/>
    </s:SciChartSurface.Resources>
    <s:SciChartSurface.RenderableSeries>
       <s:FastStripeRenderableSeries StrokeThickness="1"
                                     Stroke="White"
                                     Fill="DodgerBlue"
                                     PointLabelProvider="{StaticResource MyPointLabelProvider}"/>
    </s:SciChartSurface.RenderableSeries>
</s:SciChartSurface>
Attaching the StripePointLabelProvider to FastStripeRenderableSeries (Code)
Copy Code
var stripeSeries = new FastStripeRenderableSeries
{
    StrokeThickness = 1,
    Stroke = Colors.White,
    Fill = Brushes.DodgerBlue,
    PointLabelProvider = new StripePointLabelProvider()
};

 

See Also